<template>
  <div id="app">
    <div class="submit" :style="'height:'+fullHeight+'px;'">
      <div class="top">
        <span class="iconfont icon-fanhui" @click="back"></span>
        <span>支付订单</span>
      </div>
      <div class="main">
        <div class="text">
          <span class="iconfont icon-xuanze"></span>
          <span>订单创建成功</span>
          <span>支付时间剩余</span>
        </div>
        <div class="time">
          <span>{{h}}</span>:
          <span>{{m}}</span>:
          <span>{{s}}</span>
        </div>
      </div>
      <div class="price">
        <span>应付金额</span>
        <span>￥{{price}}</span>
      </div>
      <button class="pay" @click="pay">去支付</button>
    </div>
  </div>
</template>
<script>
import { formatTime, toDub } from "../../util/util";
export default {
  name: "Submit",
  components: {},
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      data: [],
      ids:[],
      price: 0,
      time: 0,
      timer: "",
      h: toDub(0),
      m: toDub(30),
      s: toDub(0)
    };
  },
  methods: {
    getHeight() {
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          this.fullHeight = window.fullHeight;
        })();
      };
    },
    getData() {
      var ids = JSON.parse(localStorage.getItem("ids"));
      this.ids=ids;
      this.ids.map((v, k) => {
        this.axios
        .get("http://115.28.137.176:8080/getOrders", {
          params: {
            orderId: v.id
          }
        })
        .then(res => {
          console.log(res.data.data[0]);
          this.price = res.data.data[0].sumMoney;
        })
        .catch(err => {
          console.log("网络错误", err);
        });
      })  
    },
    setTime() {
      var time = 30 * 60;
      this.timer = setInterval(() => {
        time--;
        var h = Math.floor(time / 3600);
        var m = Math.floor((time % 3600) / 60);
        var s = Math.floor((time % 3600) % 60);
        this.h = toDub(h);
        this.m = toDub(m);
        this.s = toDub(s);
        if (time == 0) {
          clearInterval(this.timer);
          //取消订单
          this.axios
            .get("http://115.28.137.176:8080/updateOrder", {
              params: {
                deleteStatus:1,
                deleteTime:new Date()
              }
            })
            .then(res => {
              console.log(res);
            })
            .catch(err => {
              console.log("网络错误", err);
            });
        }
      }, 1000);
    },
    back() {
      this.$router.go(-1);
    },
    pay() {
      clearInterval(this.timer);
      var cartList = JSON.parse(localStorage.getItem("cartList"));
      localStorage.clear();
      //修改库存和销量
      cartList[0].goodsInfo.map(v => {
        console.log(v)
        this.axios
          .get("http://115.28.137.176:8082/ss/updateSs", {
            headers:{
              "token":"222"
            },
            params: {
              // proId: v.proId
              proStore: v.product.proStore - v.product.c_num,
              proSales: v.product.proSales + v.product.c_num,
              proId: "222"
            }
          })
          .then(res => {
            console.log(res.data)
          })
          .catch(err => {
            console.log("网络错误", err);
          });
      });
      //更改订单状态
      // this.ids.map((v, k) => {
      //   this.axios
      //     .get("http://115.28.137.176:2020/updateOrder", {
      //       params: {
      //         orderId: v.id,
      //         payTime: new Date(),
      //         payStatus: 1
      //       }
      //     })
      //     .then(res => {
      //       if (k == ids.length - 1) {
      //         this.$router.push({
      //           path: "/cart/success"
      //         });
      //       }
      //     })
      //     .catch(err => {
      //       console.log("网络错误", err);
      //     });
      // });
    }
  },
  watch: {
    fullHeight(val) {
      if (this.timer) {
        this.fullHeight = val;
        this.timer = true;
        setTimeout(() => {
          this.timer = false;
        }, 400);
      }
    }
  },
  mounted: function() {
    this.getHeight();
    this.getData();
    this.setTime();
  }
};
</script>
<style src="../../assets/font/iconfont.css"></style>
<style lang="less">
@baseSize: 20;
@wh1: #fff;
@gray1: #f5f5f5;
@gray2: #f8f8f8;
@gray3: #d1d1d1;
@gray4: #e2e2e2;
html {
  font-size: @baseSize*1px;
}
.px2rem(@name,@px) {
  @{name}: @px / 2 / @baseSize * 1rem;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  outline: none;
}
.ellipsis() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.submit {
  background: @gray1;
  .top {
    .px2rem(height, 76);
    .px2rem(line-height, 76);
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid @gray2;
    span:first-child {
      width: 39%;
      .px2rem(margin-left, 22);
      .px2rem(font-size, 36);
    }
    span:last-child {
      .px2rem(font-size, 31);
    }
  }
  .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    .px2rem(height, 500);
    background: #fff;
    .text {
      display: flex;
      flex-direction: column;
      span:first-child {
        .px2rem(margin-top, 70);
        .px2rem(margin-bottom, 28);
        .px2rem(font-size, 164);
        color: #e94716;
      }
      span:nth-child(2) {
        .px2rem(font-size, 40);
        .px2rem(height, 88);
        .px2rem(line-height, 88);
      }
      span:nth-child(3) {
        .px2rem(font-size, 22);
        .px2rem(height, 46);
        .px2rem(line-height, 46);
      }
    }
    .time {
    }
  }
  .price {
    display: flex;
    .px2rem(height, 90);
    .px2rem(line-height, 90);
    .px2rem(margin-top, 15);
    .px2rem(margin-bottom, 15);
    background: #fff;
    span {
      width: 47%;
    }
    span:first-child {
      .px2rem(margin-left, 20);
      .px2rem(font-size, 30);
    }
    span:last-child {
      display: flex;
      justify-content: flex-end;
      .px2rem(font-size, 26);
    }
  }

  .pay {
    position: fixed;
    bottom: 0;
    width: 100%;
    .px2rem(height, 100);
    background: #e94716;
    border: none;
    outline: none;
  }
}
</style>
